<template>
  <div class="main">
    <div class="main-box">
      <p>404</p>
      <span>您的页面走丢了</span>
      <van-button type="primary" size="large" color="#00B1FF" round @click="gohome">
        前往首页
      </van-button>
      <div class="top">
        <img src="../assets/image/卡通形象.png" alt="" />
      </div>
    </div>
    <img src="../assets/image/login2.png" alt="" />
  </div>
</template>

<script>
import { useRouter } from "vue-router";
export default {
  setup() {
    const router = useRouter();
    const gohome = () => {
      router.push("/home");
    };

    return {
      gohome,
    };
  },
};
</script>

<style lang="less" scoped>
.main {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  background: -webkit-gradient(linear, 0 0, 0 70%, from(#1bd0fe), to(#fff));

  > .main-box {
    width: 320px;
    height: 375px;
    background: white;
    border: #56d6fb 10px solid;
    border-radius: 20px;
    display: flex;
    align-items: center;
    flex-direction: column;
    padding-top: 20px;
    box-shadow: 0 0 30px #046ae1;
    margin-top: 120px;
    position: relative;

    > p {
      font-size: 120px;
      font-weight: 300;
      color: lightgray;
      text-shadow: 5px 5px 5px #ff0000;
      font-style: italic;
      letter-spacing: 13px;
    }

    > span {
      margin-top: 40px;
      letter-spacing: 6px;
      margin-bottom: 30px;
    }

    > .van-button {
      width: 250px;
      letter-spacing: 5px;
    }

    > .top {
      width: 230px;
      height: 100px;
      position: absolute;
      top: -92px;
      left: 35px;
      transform: scale(0.8);
    }
  }
}
</style>
